<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>:placeholder-shown</title>
		<style>
			.input1:placeholder-shown {
				border: 1px solid #0000FF;
			}
			.input1:placeholder-shown + .tip {
				display: inline;
			}
			.tip {
				display: none;
				color: red;
			}
			/* ----------------------------------- */
			.input-fill-x {
				position: relative;
			}
			.fill-tip {
				position: absolute;
				left: 14px;top: 16px;
				pointer-events: none;
				transition: all .2s;
				
				background-color: #fff;
				color: #aaa;
			}
			.input2:not(:placeholder-shown) ~ .fill-tip,
			.input2:focus ~ .fill-tip {
				transform: scale(.75) translate(0 ,-32px);
			}
			
			.input2:placeholder-shown::placeholder {
				color: transparent;
			}
			.input2 {
				padding: 1.25rem .75rem;
				border-radius: 4px;
			}
		</style>
	</head>
	<body>
		<h2>占位显示符伪类，和placeholder属性密切</h2>
		<h4>兼容性极好，除了ie随便用</h4>
		<hr>
		<h4>应用：判断空值</h4>
		<input class="input1" placeholder="随便来点啥"/><span class="tip">随便提示一点</span>
		<hr>
		<h4>应用：实现Material Design 风格</h4>
		<div class="input-fill-x">
			<input class="input2" placeholder="提示"/>
			<label class="fill-tip">提示</label>
		</div>
	</body>
</html>
